<template>
  <div class="exam-monitor">
    <div class="monitor-header">
      <h2>考试监控</h2>
      <div class="header-actions">
        <el-button @click="refreshData">
          <el-icon><Refresh /></el-icon>
          刷新数据
        </el-button>
      </div>
    </div>

    <!-- 考试状态概览 -->
    <el-row :gutter="20">
      <el-col :span="6" v-for="stat in examStats" :key="stat.label">
        <el-card class="stat-card">
          <div class="stat-content">
            <div class="stat-number" :class="stat.type">{{ stat.value }}</div>
            <div class="stat-label">{{ stat.label }}</div>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 进行中的考试 -->
    <el-card class="exam-list-card">
      <template #header>
        <h3>进行中的考试</h3>
      </template>

      <el-table :data="activeExams" v-loading="loading">
        <el-table-column prop="title" label="考试名称" />
        <el-table-column prop="subject" label="科目" width="120" />
        <el-table-column prop="duration" label="时长" width="100" />
        <el-table-column label="参考人数" width="120">
          <template #default="{ row }">
            {{ row.joined_count }} / {{ row.total_count }}
          </template>
        </el-table-column>
        <el-table-column label="进度" width="150">
          <template #default="{ row }">
            <el-progress
              :percentage="Math.round((row.joined_count / row.total_count) * 100)"
              :stroke-width="6"
            />
          </template>
        </el-table-column>
        <el-table-column prop="start_time" label="开始时间" width="180">
          <template #default="{ row }">
            {{ formatDateTime(row.start_time) }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200">
          <template #default="{ row }">
            <el-button size="small" type="primary" @click="viewDetails(row)">
              查看详情
            </el-button>
            <el-button size="small" type="warning" @click="endExam(row)">
              结束考试
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { Refresh } from '@element-plus/icons-vue'

// 响应式数据
const loading = ref(false)
const activeExams = ref([])
const examStats = reactive([
  { label: '进行中考试', value: 0, type: 'primary' },
  { label: '今日参考', value: 0, type: 'success' },
  { label: '异常情况', value: 0, type: 'warning' },
  { label: '已完成考试', value: 0, type: 'info' }
])

// 获取考试监控数据
const fetchExamData = async () => {
  loading.value = true
  try {
    // TODO: 实现实际的API调用
    // const response = await examApi.getMonitoringData()

    // 模拟数据
    activeExams.value = [
      {
        id: 1,
        title: '期中数学考试',
        subject: '数学',
        duration: '120分钟',
        joined_count: 45,
        total_count: 50,
        start_time: '2024-01-19 09:00:00'
      },
      {
        id: 2,
        title: '英语听力测试',
        subject: '英语',
        duration: '60分钟',
        joined_count: 38,
        total_count: 40,
        start_time: '2024-01-19 10:30:00'
      }
    ]

    examStats[0].value = activeExams.value.length
    examStats[1].value = activeExams.value.reduce((sum, exam) => sum + exam.joined_count, 0)
  } catch (error) {
    console.error('获取考试数据失败:', error)
    ElMessage.error('获取考试数据失败')
  } finally {
    loading.value = false
  }
}

// 刷新数据
const refreshData = () => {
  fetchExamData()
}

// 查看考试详情
const viewDetails = (exam: any) => {
  // TODO: 跳转到考试详情页面
  console.log('查看考试详情:', exam)
}

// 结束考试
const endExam = (exam: any) => {
  // TODO: 实现结束考试逻辑
  console.log('结束考试:', exam)
}

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  return new Date(dateTime).toLocaleString('zh-CN')
}

onMounted(() => {
  fetchExamData()
})
</script>

<style scoped lang="scss">
.exam-monitor {
  padding: 20px;
}

.monitor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;

  h2 {
    margin: 0;
    color: #303133;
  }
}

.stat-card {
  margin-bottom: 20px;

  .stat-content {
    text-align: center;
    padding: 20px;

    .stat-number {
      font-size: 36px;
      font-weight: bold;
      margin-bottom: 8px;

      &.primary { color: #409eff; }
      &.success { color: #67c23a; }
      &.warning { color: #e6a23c; }
      &.info { color: #909399; }
    }

    .stat-label {
      color: #606266;
      font-size: 14px;
    }
  }
}

.exam-list-card {
  h3 {
    margin: 0;
    color: #303133;
  }
}
</style>